import React, { useState, useEffect } from "react";
import { List, Row, Col, Modal, message, Button } from "antd";
import axios from "axios";
import servicePath from "../config/apiUrl";
import "../static/styles/article-list.css";
const { confirm } = Modal;
function ArticleList(props) {
  const [list, setList] = useState([]);
  useEffect(() => {
    getList();
  }, []);
  const getList = () => {
    axios({
      method: "GET",
      url: servicePath.getArticleList,
      withCredentials: true
    }).then(res => {
      setList(res.data.list);
    });
  };
  //   删除文章
  const deleteArticle = id => {
    confirm({
      title: "删除提示",
      content: "确认要删除这篇文章吗?",
      onOk() {
        axios(servicePath.deleteArticle + id, { withCredentials: true }).then(
          res => {
            message.success("删除成功!");
            getList();
          }
        );
      },
      onCancel() {
        message.info("取消删除");
      }
    });
  };
  //   修改文章跳转
  const updateArticle = id => {
    props.history.push("/index/add/" + id);
  };
  return (
    <>
      <List
        header={
          <Row className="list-div">
            <Col span={8}>
              <b>标题</b>
            </Col>
            <Col span={4}>
              <b>类别</b>
            </Col>
            <Col span={4}>
              <b>文章发布时间</b>
            </Col>
            <Col span={4}>
              <b>浏览量</b>
            </Col>
            <Col span={4}>
              <b>操作</b>
            </Col>
          </Row>
        }
        bordered
        dataSource={list}
        renderItem={item => {
          return (
            <List.Item>
              <Row className="list-div">
                <Col span={8}>
                  <b>{item.title}</b>
                </Col>
                <Col span={4}>
                  <b>{item.typeName}</b>
                </Col>
                <Col span={4}>
                  <b>{item.addTime}</b>
                </Col>
                <Col span={4}>
                  <b>{item.view_count}</b>
                </Col>
                <Col span={4}>
                  <Button
                    type="primary"
                    onClick={() => {
                      updateArticle(item.id);
                    }}
                  >
                    修改
                  </Button>
                  &#x3000;
                  <Button
                    onClick={() => {
                      deleteArticle(item.id);
                    }}
                  >
                    删除
                  </Button>
                </Col>
              </Row>
            </List.Item>
          );
        }}
      />
    </>
  );
}
export default ArticleList;
